<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>Insert title here</title>

<link th:href="@{/bootstrap/css/bootstrap.min.css}" rel="stylesheet" />
<!-- 通过@{}引用web静态资源 -->
<link th:href="@{/bootstrap/css/bootstrap-theme.min.css}"
	rel="stylesheet" />
<script type="text/javascript" th:src="@{/jquery-3.3.1.min.js}"></script>
<script type="text/javascript"
	th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
<script type="text/javascript"
	th:src="@{/jquery.serializejson.min.js}"></script>
</head>
<body>

	<button type="button" class="btn btn-info" data-toggle="modal"
		data-target="#myModal">添加</button>
	<hr />
	<table class="table table-hover">
		<tr th:if="${not #lists.isEmpty(productList)}">
			<td>序号</td>
			<td>名称</td>
			<td>图片</td>
			<td>价格</td>
			<td>操作</td>
		</tr>
		<tr th:each="product,productStat:${productList}">
			<td th:text="${productStat.index+1}">0</td>
			<td th:text="${product.name}">电视</td>
			<td><img th:src="${product.pic}" style="width: 100px;height: 100px" /></td>
			<td th:text="${product.price}">价格</td>
			<td><button type="button" class="btn btn-info"
					data-toggle="modal" data-target="#myModal" th:onclick='javascript:updateProduct(${product});'>修改</button>&nbsp;&nbsp;&nbsp;
				<button class="btn btn-danger">删除</button></td>
		</tr>

	</table>

	<!-- Modal -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">添加产品</h4>
				</div>
				<form id="productForm" action="/product/save" method="post" enctype="multipart/form-data">
					<div class="modal-body">
						<!-- 表单 -->
							<input type="hidden" name="id"/>
							<div class="form-group">
								<label for="name">产品名称</label> <input
									type="text" class="form-control" id="name" name="name" 
									placeholder="产品名称" />
							</div>
							<div class="form-group">
								<label for="price">产品价格</label> <input
									type="text" class="form-control" id="price" name="price"
									placeholder="产品价格" />
							</div>
							<div class="form-group">
								<label for="inputFile">上传图片</label> <input
									type="file" id="inputFile" name="file" />
							</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button type="submit" class="btn btn-primary" >保存</button>
					</div>
				</form>
			</div>
		</div>
	</div>



	<script type="text/javascript">
	
		/* function save() {
			
			var data = $("#productForm").serializeJSON();
			
			$.post("http://localhost:8080/product/save",data,function(response){
				location.href="http://localhost:8080/product/findAll"
			});
			console.log(JSON.stringify(data))
		} */
		
		function update(product){
			alert(product.name);
		}
		
	</script>
</body>
</html>